<template>
  <div class="dx-menu-lists">
    <div class="dx-header-container">
      <div><i class="dx-layer" /><span>地质数据</span></div>
      <div>
        <i
          class="menu-contraction el-icon-s-unfold"
          @click="menuContraction"
        ></i>
        <router-link
          tag="i"
          :to="{ name: 'Dashboard' }"
          class="el-icon-close"
        />
      </div>
    </div>
    <div class="menu-lists-body" v-if="dataList.length">
      <div
        v-for="item in dataList"
        :key="item.id"
        :class="item.id === activeItemId ? 'muen-active ' : ''"
        @click="linkRouterTo(item)"
      >
        <!-- :to="{ muen-active-hover
          name: `GeologicalDisplay`,
          query: { type: item.hasData ? item.type : '' },
        }" -->

        <div
          class="tools-icon"
          :style="{
            backgroundColor: item.hasData ? item.bc : '#cccccc',
            cursor: item.hasData ? 'default' : 'not-allowed',
          }"
        >
          <i :class="item.icon" />
        </div>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import DataOptions from "./dataOptions";
import { getproHasData } from "@/api/geological";
export default {
  name: "MenuLists",
  mounted() {
    const p = {
      projectnumber: this.$store.getters.proNum,
    };
    getproHasData(p)
      .then((resp) => {
        const obj = {
          drilling: resp.borehole || false,
          profile: resp.profile || false,
          plane: resp.plane || false,
          model: resp.model || false,
          text: resp.report || false,
        };
        const arr = Object.keys(obj);
        const d = arr.find((key) => {
          if (obj[key]) {
            return key;
          }
        });
        if (!obj.drilling) {
          this.$router.push({
            path: "/geological/theGeological/geologicalDisplay",
            query: { type: d || "drilling" },
          });
        } else {
        }
        this.activeID = this.$route.query.type || d || null;
        this.dataList = DataOptions.fieldMenuLits.map((item) => {
          item.hasData = obj[item.type];
          if (this.activeID === item.type) {
            this.activeItemId = item.id;
          }

          return item;
        });
      })
      .catch(() => {
        const obj = {
          drilling: false,
          profile: false,
          plane: false,
          model: false,
          text: false,
        };
        this.activeID = this.$route.query.type || null;
        this.dataList = DataOptions.fieldMenuLits.map((item) => {
          item.hasData = obj[item.type];
          return item;
        });
      });
  },
  data() {
    return {
      dataList: [],
      activeID: "",
      activeItemId: null,
    };
  },
  methods: {
    linkRouterTo(data) {
      if (!data.hasData) return;
      this.activeItemId = data.id;
      this.$router.push({
        path: "/geological/theGeological/geologicalDisplay",
        query: { type: data.type },
      });
    },
    menuContraction() {
      this.$store.commit("app/updataMeunBar", true);
    },
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.activeID = val.query.type || this.activeID;
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.router-link-exact-active {
  box-shadow: 0 0 4px #fff, 0 0 2px #fff inset;
  border-radius: 4px;
}
</style>
